<template>
  <div class="reportDetailContainer">
    <div class="wrapper" id="wrapper">
      <!-- 头部 -->
      <van-nav-bar
        title="日报详情"
        left-arrow
        @click-left="onClickLeft"
        class="navheadrt"
      >
      </van-nav-bar>
      <div class="wetherCont">
        <!-- 日历 -->
        <div class="caldenr f fb">
          <div class="caldenr-left f" @click="showDate = true">
            <div class="date">{{ today }}</div>
            <van-icon name="arrow-down" />
          </div>
          <div class="caldenr-middle">星期{{ today_week }}</div>
          <div class="caldenr-right f fc" @click="onClickLeft">
            概览 <van-icon name="arrow" />
          </div>
          <van-popup
            v-model="showDate"
            position="bottom"
            :style="{ height: '30%', width: '100%' }"
          >
            <van-datetime-picker
              type="date"
              @cancel="showDate = false"
              @confirm="onConfirmstart_date"
              v-model="currentDate"
              :min-date="minDate"
              :max-date="maxDate"
              :formatter="formatter"
            />
          </van-popup>
          <!-- <van-calendar v-model="showDate" @confirm="onConfirm" /> -->
        </div>
        <!-- 天气 -->
        <div class="weather">
          <div class="top f fb">
            <span>白天</span>
            <span>{{
              WeatherForecast.day_weather ? WeatherForecast.day_weather : "-"
            }}</span>
            <span>{{
              WeatherForecast.day_wind_power
                ? WeatherForecast.day_wind_power
                : "<0级"
            }}</span>
            <span>{{
              WeatherForecast.day_air_temperature
                ? WeatherForecast.day_air_temperature
                : "0/0"
            }}</span>
          </div>
          <div class="top f fb">
            <span>晚上</span>
            <span>{{
              WeatherForecast.night_weather
                ? WeatherForecast.night_weather
                : "-"
            }}</span>
            <span>{{
              WeatherForecast.night_wind_power
                ? WeatherForecast.night_wind_power
                : "<0级"
            }}</span>
            <span>{{
              WeatherForecast.night_air_temperature
                ? WeatherForecast.night_air_temperature
                : "0/0"
            }}</span>
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="reportCont">
        <!--劳务实名制-->
        <div class="reportList">
          <div class="reporttit">劳务实名制</div>
          <div class="cont">
            <div class="cont_right fl">
              <ul class="contright_ul">
                <li class="contright_li f vfs">
                  <span class="ind"
                    >出勤{{ RealNameSystem.Attendance }}人：</span
                  >
                  <div>
                    <span
                      v-for="(item, index) in RealNameSystem.AttendanceList"
                      :key="index"
                    >
                      {{ item.key }}{{ item.value }}人
                    </span>
                  </div>
                </li>
                <li class="contright_li f vfs">
                  <span class="ind"
                    >{{ RealNameSystem.UnReportedNum }}人未成功上报：</span
                  >
                  <div>
                    <span
                      v-for="(item, index) in RealNameSystem.UnReportedList"
                      :key="index"
                      >{{ item }}</span
                    >
                  </div>
                </li>
                <li class="contright_li vfs">
                  <span class="ind"
                    >{{ RealNameSystem.UnAttendance }}人连续5天未出勤：</span
                  >
                  <div>
                    <span
                      v-for="(item, index) in RealNameSystem.UnAttendanceList"
                      :key="index"
                      >{{ item }}</span
                    >
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--物联网监测-->
        <div class="reportList">
          <div class="reporttit">物联网监测</div>
          <div class="cont">
            <div class="cont_right fl">
              <ul class="contright_ul">
                <li class="contright_li f vfs">
                  <p>
                    <span class="ind">扬尘监测：</span>
                    <span>
                      pm2.5：{{ InternetMonitoring.RaiseDustPM25 }}ug/m³;
                    </span>
                    <span
                      >pm10:{{ InternetMonitoring.RaiseDustPM10 }}ug/m³;</span
                    >
                    <span
                      >预警{{ InternetMonitoring.RaiseDustWarming }}次;</span
                    >
                  </p>
                </li>
                <li class="contright_li f vfs">
                  <span class="ind">噪音监测：</span>
                  <span> {{ InternetMonitoring.NoiseValue }}db(A);</span>
                  <span> 预警{{ InternetMonitoring.NoiseWarming }}次;</span>
                </li>
                <li class="contright_li f vfs">
                  <span class="ind">塔吊监测：</span>
                  <span> 载重统计 {{ InternetMonitoring.TowerCrane }}t ;</span>
                  <span>
                    预警{{ InternetMonitoring.TowerCraneWarming }}次;</span
                  >
                  <span
                    v-for="(item, index) in InternetMonitoring.TowerCraneList"
                    :key="index"
                  >
                    {{ item.Key }}:{{ item.Value }}次;
                  </span>
                </li>
                <li class="contright_li f vfs">
                  <span class="ind">升降机监测：</span>
                  <span> 载重统计 {{ InternetMonitoring.Lift }}t ;</span>
                  <span>预警{{ InternetMonitoring.LiftWarming }}次;</span>

                  <span
                    v-for="(item, index) in InternetMonitoring.LiftList"
                    :key="index"
                  >
                    {{ item.Key }}:{{ item.Value }}次;
                  </span>
                </li>
                <li class="contright_li f vfs">
                  <span class="ind">能耗监测：</span>
                  <span> 用电量：{{ InternetMonitoring.Lift }}kw/h ;</span>
                  <span> 用水量{{ InternetMonitoring.Lift }}t;</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--物料管理-->
        <div class="reportList">
          <div class="reporttit">物料管理</div>
          <div class="cont">
            <div class="cont_right fl">
              <ul class="contright_ul" v-if="MaterialList.length > 0">
                <li
                  class="contright_li f vfs"
                  v-for="(item, index) in MaterialList"
                  :key="index"
                >
                  <span class="ind">{{ item.Type }}:</span>
                  <span class="indeed">进场{{ item.Cars }}车</span>
                  <span class="indeed">总计{{ item.Total }}t</span>
                </li>
              </ul>
              <p v-else>暂无数据！！</p>
            </div>
          </div>
        </div>
        <!--进度管理-->
        <div class="reportList">
          <div class="reporttit">进度管理</div>
          <div class="cont">
            <div class="cont_right fl">
              <ul
                class="contright_ul"
                v-if="ProgressManagement.DetailList.length > 0"
              >
                <li
                  class="contright_li f vfs"
                  v-for="(item, index) in ProgressManagement.DetailList"
                  :key="index"
                >
                  <p>
                    <span class="ind">{{ item.TaskName }}:</span
                    ><span>完成{{ item.PercenTage }}%</span>
                    <span>比计划前进度滞后{{ item.Lagging }}天</span>
                  </p>
                </li>
              </ul>
              <p v-else>暂无数据！！</p>
            </div>
          </div>
        </div>
        <!--现场巡检-->
        <div class="reportList">
          <div class="reporttit">现场巡检</div>
          <div class="cont">
            <div class="cont_right fl">
              <ul class="contright_ul">
                <li
                  class="contright_li f vfs"
                  v-for="(item, index) in InspectionList"
                  :key="index"
                >
                  <span class="ind">{{ item.ProblemType }}:</span>
                  <span class="indeed">整改率{{ item.RectifyRate }}%</span>
                  <span class="indeed">新增问题{{ item.ProblemNum }}项</span>
                  <span class="indeed">处理中 {{ item.HandleNum }}项</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { GetDailyDiaryInfo } from "@/api/api";
const currentDate = new Date();
const maxDate = new Date();
export default {
  data() {
    return {
      //日历
      today: "",
      today_week: "",
      showDate: false,
      minDate: new Date(2020, 0, 1),
      maxDate: maxDate,
      currentDate,
      //天气
      WeatherForecast: {},
      RealNameSystem: {}, //劳务实名制
      ProgressManagement: {}, //进度管理
      InspectionList: {}, //现场巡检
      InternetMonitoring: {}, //物联网监测
      MaterialList: [], //物料管理
    };
  },
  mounted() {
    this.todyDate();
    this.select();
  },
  methods: {
    async select() {
      var than = this;
      than.$toast.loading({
        mask: true,
        message: "加载中...",
        className: "my-toast",
      });
      let res = await this.Request(
        GetDailyDiaryInfo({
          ProjectID: localStorage.getItem("projectid"),
          date: than.today,
        })
      );
      if (res.StatusCode === 200) {
        than.$toast.clear();
        this.WeatherForecast = res.Result.WeatherForecast;
        this.ProgressManagement = res.Result.ProgressManagement;
        this.RealNameSystem = res.Result.RealNameSystem;
        this.InspectionList = res.Result.InspectionList;

        this.InternetMonitoring = res.Result.InternetMonitoring;
        this.MaterialList = res.Result.MaterialList;
      } else {
        this.$message({
          type: "error",
          message: res.Message,
          center: "true",
        });
      }
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      } else if (type === "hour") {
        return `${value}时`;
      } else if (type === "minute") {
        return `${value}分`;
      } else if (type === "second") {
        return `${value}秒`;
      }
      return value;
    },
    //系统日期
    todyDate() {
      var a = new Array("日", "一", "二", "三", "四", "五", "六");
      var week = new Date().getDay();
      this.today_week = a[week];
      var d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      this.today = year + "-" + month + "-" + day;
    },

    //开始时间
    onConfirmstart_date(val) {
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }

      this.today = `${year}-${month}-${day}`;
      var a = new Array("日", "一", "二", "三", "四", "五", "六");
      var week = val.getDay();
      this.today_week = a[week];
      this.select();
      this.showDate = false;
    },
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
  },
};
</script>
<style lang="stylus" scoped>
@import './assets/common';
@import '~@/assets/css/resetVant.css';

.reportDetailContainer {
  width: 100%;
  height: 100%;

  .navheadrt {
    /deep/ .van-nav-bar__title, /deep/.van-icon {
      color: #fff !important;
    }
  }

  #wrapper {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .wetherCont {
      width: 100%;
      height: 410px;
      background: url('./assets/image/reportBg.jpg') no-repeat;
      background-size: 100% 100%;

      .caldenr {
        width: 100%;
        height: 90px;
        padding: 0 0 0 40px;
        box-sizing: border-box;
        color: #fff;
        margin-bottom: 19px;

        .caldenr-left {
          font-size: 28px;
          font-family: Microsoft YaHei;

          .date {
            margin-right: 10px;
            font-size: 28px;
          }
        }

        .caldenr-middle {
          font-size: 28px;
          font-family: Microsoft YaHei;
        }

        .caldenr-right {
          width: 107px;
          height: 50px;
          background: #fff;
          border-radius: 5px 0 0 5px;
          font-size: 28px;
          font-family: Microsoft YaHei;
          font-weight: 300;
          color: #699fff;
        }
      }

      .weather {
        width: 93%;
        margin: 0 auto;
        padding: 0 30px;
        box-sizing: border-box;
        background: rgba(249, 255, 252, 0.2);
        border-radius: 8px;

        .top {
          font-size: 28px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          width: 100%;
          height: 90px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.17);
        }
      }
    }
  }

  .reportCont {
    width: 100%;
    height: calc(100% - 500px);
    overflow-y: scroll;
    box-sizing: border-box;
  }

  .reportList {
    width: 100%;
    border-left: 10px solid #699fff;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(40, 40, 40, 0.2);
    padding: 25px 0 0 30px;
    box-sizing: border-box;

    .reporttit {
      width: 100%;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #699fff;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(40, 40, 40, 0.2);
      margin-bottom: 25px;
    }

    .cont {
      width: 100%;
      min-height: 180px;

      .cont_left {
        width: 230px;
        flex-shrink: 0;

        .leftdiv {
          width: 143px;
          height: 143px;
          border: 6px solid #699fff;
          border-radius: 100%;

          .cont_left-top {
            margin-bottom: 12px;
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #282828;

            .num {
              font-size: 40px;
              font-family: Arial;
              font-weight: 400;
              color: #699fff;
            }
          }

          .cont_left-bot {
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #595959;
          }
        }
      }

      .cont_right {
        .contright_ul {
          width: 100%;
          padding-top: 10px;

          .contright_li {
            width: 100%;
            padding: 10px 28px;
            background: #EEEDED;
            font-size: 26px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #595959;
            box-sizing: border-box;
            margin-bottom: 18px;
            flex-wrap: wrap;

            .ind {
              color: #699fff;
              // width: 130px;
              flex-shrink: 0;
            }

            .indeed {
              margin-left: 20px;
            }

            span {
              margin-right: 6px;
            }
          }
        }
      }
    }
  }
}
</style>